<template>
  <div>
    <!-- 这是默认插槽 -->
    <!-- <p>我是内容1</p> -->
     <!-- <slot></slot> -->
    <!-- <p>我是内容2</p> -->
    
    <!-- 这是具名插槽 -->
    <!-- <header> -->
        <!-- <p>我是header</p> -->
        <!-- <slot name="header"></slot> -->
    <!-- </header> -->
     <!-- <main> -->
        <!-- <p>我是main</p> -->
        <!-- <slot name="main"></slot> -->
     <!-- </main> -->
    <!-- <footer> -->
        <!-- <p>我是footer</p> -->
        <!-- <slot name="footer"></slot> -->
    <!-- </footer> -->
          <!-- 这是作用域插槽:即带数据给父组件 -->
          <p>我是作用域插槽</p>
          <slot :list="list"></slot>
  </div>
</template>

<script>

export default{
    name:"son",
    data(){
        return {
            list:["alex","bob","sam","wersimisi"]
        }
    }
}

</script>

<style lang='less' scoped>

</style>
